<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 1. 块元素（容器级别）： 
        ○ 比较霸道， 占父容器的一行，可设宽高和四边的内外边距
        ○ 宽度默认占父容器的100%，高度由子内容自动撑高、里面可以放任何元素
        ○ 常用块元素：div、p、ul、li、 h1~h6 -->
    <div style="background-color: antiquewhite;">
        <h1>
            h1
        </h1>
    </div>
    <div style="background-color: aqua;">div2</div>
    <!-- 2. 行内元素（文本级别）： 
        ○ 多个行内元素会在同一行，不能设宽高，仅能设水平方向内外边距，垂直方向无法设置。
        ○ 内容的宽高就是元素的宽高，基本只能放文本(a标签比较特殊)。
        ○ 常用行内元素：span、i、b -->
    <span style="background-color: antiquewhite;">span1</span>
    <span style="background-color: green;">span2</span>
</body>

</html>